<template>
  <KView class="activity-countdown-view bargain-countdown-view">
    <KView class="activity-countdown-clock">
      <sys-svg name="clock" color="#fd3a3a"></sys-svg>
    </KView>
    <KView class="activity-countdown-text">
      <template v-if="goodsBargain.type===0">
        <span>未开始</span>
        <span>距开始还有</span>
      </template>
      <template v-else-if="goodsBargain.type===1">
        <span>正在进行</span>
        <span>距结束还有</span>
      </template>
      <template v-else-if="goodsBargain.type===2">
        <span>活动已结束</span>
      </template>
    </KView>
    <KView class="activity-countdown-time" v-if="rangeTime!==undefined">
      <countdown-view :time="rangeTime"></countdown-view>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';
  import CountdownView from 'common/countdownView';

  import timeCountdown from 'mixins/timeCountdown';

  export default {
    mixins: [timeCountdown('goodsBargain')],

    props: {
      goodsBargain: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    components: {
      SysSvg,
      CountdownView
    }
  };

</script>

<style lang="scss">
  @import '~style/activityCountdown';

  .bargain-countdown-view {
    background: #f6f6f6;

    .activity-countdown-text {
      color: #000000;
    }
  }

</style>
